<template>
    <div>
        <ul>
            <div class="img"><img src="https://angular.cn/assets/images/logos/angular/logo-nav@2x.png" alt=""></div>
            <li @click="mag=1" :class="{whh:mag==1}">  <router-link to="/">特性 </router-link></li>
            <li @click="mag=2" :class="{whh:mag==2}">   <router-link to="/Docs">文档</router-link></li>
            <li @click="mag=3" :class="{whh:mag==3}">  <router-link to="/Resources">资源</router-link></li>
            <li @click="mag=4" :class="{whh:mag==4}"> <router-link to="/Events">会议</router-link></li>
            <li @click="mag=5" :class="{whh:mag==5}"> <router-link to="/Translations">关于中午版</router-link></li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Header",
        data:()=>{
            return{
                mag:1,
            }
        },
methods:{

}
    }
</script>

<style scoped>
    ul{
        background-color: cornflowerblue;
        height:70px;

        padding-left: 20px;
    }
li,.img{
    list-style: none;
    float: left;
    margin-left: 20px;
   margin-top: 20px;
    /*background-color: brown;*/
    /*width: 50px;*/
padding-left: 10px;
    height: 30px;
    line-height: 30px;
    padding-right: 20px;
    padding-left: 20px;
    border-radius: 5px;
}
li:hover{
    background-color:rgba(255,255,255,0.2);
}
.whh{
    background-color:rgba(255,255,255,0.2);
}
    .img img{
        width: 150px;
     /*margin-top: 13px;*/
    }
    li a{
        color: white;
        text-decoration: none;
        font-size: 17px;
    }
</style>